@import "./tab-pane.scss";

.pe-tabs {
    width: 100%;
    height: 100%;

    .pe-tabs-header {
        position: relative;
        width: 100%;
        display: flex;
        align-items: center;
        border-bottom: 2px solid var(--pe-color-border);
        // overflow-x: hidden;

        .pe-tabs-header-item {
            padding: 10px;
            font-size: var(--pe-font-size-default);
            cursor: pointer;

            &:hover {
                color: var(--pe-color-primary);
            }
        }

        .pe-tabs-header-active {
            color: var(--pe-color-primary);
        }

        .pe-tabs-active-bar {
            position: absolute;
            left: 0;
            bottom: -2px;
            height: 2px;
            z-index: 10;
            background-color: var(--pe-color-primary);
            transition: var(--pe-all-transition);
        }
    }

    .pe-tabs-content {
        padding: 10px;
    }
}